<template>
    <div class="allbuju"> 
        <div id="top">
        <!--左-->
        <div class="topleft" @click="tiaozhuan"> 
            <!-- 以下语句是为了使用有色图标 -->
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-arrow-left"></use>
            </svg>
        </div>
        <div class="topContent">
            <span>消息中心</span>
        </div>
        </div>
        <div id="content">
            <div class="topleft" @click="tiaozhuan2"> 
                <img src="@/assets/icon1.png"/>
                <div class="tip">
                    <span class="tip1">通知消息</span>
                    <p class="tip2">暂无消息</p>
                </div>
            </div>        
            <div class="topleft2" @click="tiaozhuan3"> 
                <img src="@/assets/icon2.png"/>
                <div class="tip">
                    <span class="tip1">社区互动</span>
                    <p class="tip2">暂无互动信息</p>
                </div>
            </div>
            <hr/>
        </div>    
    </div>
</template>

<script>
export default{
    name:"Top",
    methods:{
        //跳转到首页
        tiaozhuan:function(){
            this.$router.replace('/shouye')
        },
        //跳转到消息通知
        tiaozhuan2:function(){
            this.$router.replace('/xiaoxizhanshi1')
        },
        //跳转到社区互动
        tiaozhuan3:function(){
            this.$router.replace('/xiaoxizhanshi2')
        },
    }
}
</script>

<style lang="less" scoped>
#top{
        width: 100%;
        height: 50px;
        //弹性布局！！！！！
        display: flex;                 ///！！！！！！
        justify-content: space-between; ///！！！！！！
        align-items: center;//垂直居中
}
.topContent{
    margin-right: 42%;
}
#content{
    width: 100%;
    height: 100%;
}
img{
    width: 60px;
    height: 60px;
    float: left;
}
.tip{
    width: 300px;
    height: 60px;
    padding-top: 10px;
    left: 60px;
    float: left;
}
.tip1{
    margin-left: 10px;
    font-size: 14px;
    color: black;
}
.tip2{
    margin-left: 10px;
    font-size: 7px;
    color: gray;
}
hr{
    width: 97%;
    border: 5px solid #f7f7f7;
}
</style>